<template>
  <div class="generate-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>专业课程体系生成</span>
      </div>

      <!-- 表单 -->
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="120px"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="专业ID" prop="majorId">
              <el-input v-model="formData.majorId" placeholder="如 CS/SE" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="年级" prop="grade">
              <el-select v-model="formData.grade" placeholder="请选择">
                <el-option
                  v-for="item in gradeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="课程属性" prop="courseAttribute">
              <el-select v-model="formData.courseAttribute" placeholder="请选择">
                <el-option label="必修" value="必修" />
                <el-option label="选修" value="选修" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="课程类别" prop="courseCategory">
              <el-input v-model="formData.courseCategory" placeholder="如 公共课/专业课" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="课程平台" prop="coursePlatform">
              <el-input v-model="formData.coursePlatform" placeholder="如 中国大学MOOC" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-button type="primary" @click="generateCurriculum">生成课程体系</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 生成结果 -->
      <div v-if="generatedData.length" class="result-section">
        <el-table :data="generatedData" border style="width: 100%">
          <el-table-column prop="courseName" label="课程名称" align="center" />
          <el-table-column prop="credit" label="学分" align="center" />
          <el-table-column prop="semester" label="学期" align="center" />
          <el-table-column label="课程属性" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.courseAttribute === '必修' ? 'primary' : 'success'">
                {{ scope.row.courseAttribute }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { generateCurriculum } from '@/api/curriculum'

export default {
  name: 'CurriculumGenerate',
  data() {
    return {
      formData: {
        majorId: '',
        grade: null,
        courseCategory: '',
        coursePlatform: '',
        courseAttribute: ''
      },
      gradeOptions: [
        { label: '2021-2-2022-1', value: 1 },
        { label: '2022-1-2022-2', value: 2 },
        { label: '2022-2-2023-1', value: 3 },
        { label: '2023-1-2023-2', value: 4 }
      ],
      generatedData: [],
      loading: false
    }
  },
  methods: {
    // 生成课程体系
    async generateCurriculum() {
      const valid = await this.$refs.form.validate()
      if (!valid) return

      this.loading = true
      try {
        const response = await generateCurriculum(this.formData)
        if (response.success) {
          this.generatedData = response.data
          this.$message.success('课程体系生成成功')
        } else {
          this.$message.error(response.message)
        }
      } catch (error) {
        this.$message.error('生成失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.generate-container {
  padding: 20px;
}

.result-section {
  margin-top: 30px;
}
</style>
